<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<meta name="referrer" content="no-referrer">
		<script type="text/javascript" src="js/swiper-bundle.min.js"></script>
		<script type="text/javascript" src="js/uni-webview-js@1.5.4.js"></script>
		
		<link rel="stylesheet" href="css/swiper-bundle.min.css" />
		<title>短视频</title>
		<style>
			html, body {
				padding: 0;
				margin: 0;
				background-color: #000;
				width: 100vw;
				height: 100vh;
			}
			.swiper-slide {
				background-color: #000;
				will-change: transform;
				transform: translate3d(0,0,0);
			}
			.swiper-zoom-container {
				color: #fff;
			}
			
			.video_info {
				position: absolute;
				bottom: 60px;
				left: 0;
				right: 0;
				color: #fff;
				display: flex;
				flex-direction: column;
				max-width: 80%;
				margin-left: 15px;
			}
			.video_info span {
				font-size: 14px;
				margin-bottom: 10px;
			}
			.video_info span:last-child {
				margin-bottom: 20px;
			}
			.video_info .subtitle {
				color: #eee;
			}
			.video_info .description {
				color: #ddd;
			}
			
			.swiper-loading {
				color: #fff;
				position: absolute;
				left: 0;
				right: 0;
				z-index: -1;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.swiper-loading svg {
				width: 25px;
				height: 25px;
				margin-right: 10px;
				animation: rotate 1s linear infinite;
			}
			
			.swiper-loading span {
				margin-top: -2px;
			}
			
			.swiper-loading svg, .swiper-loading path {
				fill: #fff;
				stroke: #fff;
			}
			
			@keyframes rotate {
				%0 {
					transform: rotate(0deg);
				}
			    100% {
			        transform: rotate(360deg);
			    }
			}
			
		</style>
	</head>
	<body>
		<!-- Specify the player container -->
		<div class="swiper">
		    <div class="swiper-wrapper">
		    </div>
			<div class="swiper-thumbs">
			</div>
		    <!-- 如果需要分页器 -->
		    <!-- <div class="swiper-pagination"></div> -->
		</div>
		<script>
			var mySwiper, thumbs, slides, loadedImgs = new Map(), timeList = []
			//开启全屏按钮
			var openfullIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
				</svg>
			`
			//播放按钮
			var playIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M8 5v14l11-7z"/>
				</svg>
			`
			//暂停按钮
			var pauseIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
				</svg>
			`
			//下载图标
			var downloadIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
				</svg>
			`
			var voiceIcon = `
				<svg viewBox="0 0 24 24">
				    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
				</svg>
			`
			//加载图标
			var loadingIcon = `
				<svg t="1756110518162" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5422" width="48" height="48"><path d="M876.864 782.592c3.264 0 6.272-3.2 6.272-6.656 0-3.456-3.008-6.592-6.272-6.592-3.264 0-6.272 3.2-6.272 6.592 0 3.456 3.008 6.656 6.272 6.656z m-140.544 153.344c2.304 2.432 5.568 3.84 8.768 3.84a12.16 12.16 0 0 0 8.832-3.84 13.76 13.76 0 0 0 0-18.56 12.224 12.224 0 0 0-8.832-3.84 12.16 12.16 0 0 0-8.768 3.84 13.696 13.696 0 0 0 0 18.56zM552.32 1018.24c3.456 3.648 8.32 5.76 13.184 5.76a18.368 18.368 0 0 0 13.184-5.76 20.608 20.608 0 0 0 0-27.968 18.368 18.368 0 0 0-13.184-5.824 18.368 18.368 0 0 0-13.184 5.76 20.608 20.608 0 0 0 0 28.032z m-198.336-5.76c4.608 4.8 11.072 7.68 17.6 7.68a24.448 24.448 0 0 0 17.536-7.68 27.456 27.456 0 0 0 0-37.248 24.448 24.448 0 0 0-17.536-7.68 24.448 24.448 0 0 0-17.6 7.68 27.52 27.52 0 0 0 0 37.184z m-175.68-91.84c5.76 6.08 13.824 9.6 21.952 9.6a30.592 30.592 0 0 0 22.016-9.6 34.368 34.368 0 0 0 0-46.592 30.592 30.592 0 0 0-22.016-9.6 30.592 30.592 0 0 0-21.952 9.6 34.368 34.368 0 0 0 0 46.592z m-121.152-159.36c6.912 7.36 16.64 11.648 26.368 11.648a36.736 36.736 0 0 0 26.432-11.584 41.28 41.28 0 0 0 0-55.936 36.736 36.736 0 0 0-26.432-11.584 36.8 36.8 0 0 0-26.368 11.52 41.28 41.28 0 0 0 0 56zM12.736 564.672a42.88 42.88 0 0 0 30.784 13.44 42.88 42.88 0 0 0 30.784-13.44 48.128 48.128 0 0 0 0-65.216 42.88 42.88 0 0 0-30.72-13.44 42.88 42.88 0 0 0-30.848 13.44 48.128 48.128 0 0 0 0 65.216z m39.808-195.392a48.96 48.96 0 0 0 35.2 15.36 48.96 48.96 0 0 0 35.2-15.36 54.976 54.976 0 0 0 0-74.56 48.96 48.96 0 0 0-35.2-15.424 48.96 48.96 0 0 0-35.2 15.424 54.976 54.976 0 0 0 0 74.56zM168.32 212.48c10.368 11.008 24.96 17.408 39.68 17.408 14.592 0 29.184-6.4 39.552-17.408a61.888 61.888 0 0 0 0-83.84 55.104 55.104 0 0 0-39.616-17.408c-14.656 0-29.248 6.4-39.616 17.408a61.888 61.888 0 0 0 0 83.84zM337.344 124.8c11.52 12.16 27.712 19.264 43.968 19.264 16.256 0 32.448-7.04 43.968-19.264a68.672 68.672 0 0 0 0-93.184 61.248 61.248 0 0 0-43.968-19.264 61.248 61.248 0 0 0-43.968 19.264 68.736 68.736 0 0 0 0 93.184z m189.632-1.088c12.672 13.44 30.528 21.248 48.448 21.248s35.712-7.808 48.384-21.248a75.584 75.584 0 0 0 0-102.464A67.392 67.392 0 0 0 575.36 0c-17.92 0-35.776 7.808-48.448 21.248a75.584 75.584 0 0 0 0 102.464z m173.824 86.592c13.824 14.592 33.28 23.104 52.736 23.104 19.584 0 39.04-8.512 52.8-23.104a82.432 82.432 0 0 0 0-111.744 73.472 73.472 0 0 0-52.8-23.168c-19.52 0-38.912 8.512-52.736 23.168a82.432 82.432 0 0 0 0 111.744z m124.032 158.528c14.976 15.872 36.032 25.088 57.216 25.088 21.12 0 42.24-9.216 57.152-25.088a89.344 89.344 0 0 0 0-121.088 79.616 79.616 0 0 0-57.152-25.088c-21.184 0-42.24 9.216-57.216 25.088a89.344 89.344 0 0 0 0 121.088z m50.432 204.032c16.128 17.088 38.784 27.008 61.632 27.008 22.784 0 45.44-9.92 61.568-27.008a96.256 96.256 0 0 0 0-130.432 85.76 85.76 0 0 0-61.568-27.072c-22.848 0-45.44 9.984-61.632 27.072a96.192 96.192 0 0 0 0 130.432z" fill="#262626" p-id="5423"></path></svg>
			`
			function init () {
				if ( !timeList || timeList.length == 0 ) return
				destory()
				slides = timeList
				mySwiper = new Swiper('.swiper', {
				  direction: 'horizontal',//横向滑动
				  allowTouchMove: true,//开启触摸滑动
				  loop: false, // 循环模式选项
				  zoom: true,//开启缩放
				  parallax: false,//开启视差效果
				  virtual: {
				    slides: timeList,
					cache: false,//关闭缓存
				    renderSlide:function(slide, index){
						return renderSlide(slide, index);
				    }
				  },
				  //事件监听
				  on: {
					init: function () {
					  this.emit('slideChangeTransitionEnd')
					},
					slideChange: function () {
						var prevprevIndex = this.activeIndex - 2
						var prevprevItem = document.getElementsByClassName('slide_' + prevprevIndex)[0]
						var prevprevImg = prevprevItem && prevprevItem.getElementsByTagName('img')[0]
						if ( prevprevImg ) unloadImg(prevprevIndex)
						var nextnextIndex = this.activeIndex + 2
						var nextnextItem = document.getElementsByClassName('slide_' + nextnextIndex)[0]
						var nextnextImg = nextnextItem && nextnextItem.getElementsByTagName('img')[0]
						if ( nextnextImg ) unloadImg(nextnextIndex)
					},
				    slideChangeTransitionEnd: function(swiper){
					  var item = document.getElementsByClassName('slide_' + this.activeIndex)[0]
					  var slide = slides[this.activeIndex]
					  var img = item && item.getElementsByTagName('img')[0]
					  if ( !img && slide && slide.url ) loadImg(this.activeIndex, slides)
					  var nextIndex = this.activeIndex + 1
					  var nextItem = document.getElementsByClassName('slide_' + nextIndex)[0]
					  var nextSlide = slides[nextIndex]
					  var nextImg = nextItem && nextItem.getElementsByTagName('img')[0]
					  if ( !nextImg && nextSlide && nextSlide.url ) loadImg(nextIndex, slides)
					  var prevIndex = this.activeIndex - 1
					  var prevItem = document.getElementsByClassName('slide_' + prevIndex)[0]
					  var prevSlide = slides[prevIndex]
					  var prevImg = prevItem && prevItem.getElementsByTagName('img')[0]
					  if ( !prevImg && prevSlide && prevSlide.url ) loadImg(prevIndex, slides)
					  // var prevIndex = this.activeIndex - 1
					  // var nextIndex = this.activeIndex + 1
					  // loadImg(this.activeIndex, slides)
					  // loadImg(nextIndex, slides)
					  // loadImg(prevIndex, slides)
					  uni.postMessage({data: {change: this.activeIndex}})
				    },
					zoomChange: function (imageEl,scale,slideEl) {
						if (scale > 1) {
						  // 图片被放大了，禁用Swiper的滑动切换
						  mySwiper.allowTouchMove = false;
						} else {
						  // 图片恢复原状（scale为1），重新启用滑动切换
						  mySwiper.allowTouchMove = true;
						}
					}
				  }
				  // 如果需要分页器
				  // pagination: {
				  //   el: '.swiper-pagination',
				  // },
				})
				mySwiper.virtual.update(); // 更新虚拟幻灯片
				mySwiper.update();
				timeList = []
			}
			
			function renderSlide (slide, index) {
				slide = slides[index]
				return `
					<div class="swiper-slide slide_${index}">
						<div class="swiper-zoom-container"></div>
						<div class="video_info">
							<span class="title" data-swiper-parallax="-200" style="display: ${slide.title ? 'inline' : 'none'}">${slide.title}</span>
							<span class="subtitle" data-swiper-parallax="-400" style="display: ${slide.subtitle ? 'inline' : 'none'}">${slide.subtitle}</span>
							<span class="description" data-swiper-parallax="-600" style="display: ${slide.description ? 'inline' : 'none'}">${slide.description}</span>
						</div>
					</div>
				`
			}
			
			//加载图片
			function loadImg (index, list) {
				var item = document.getElementsByClassName('slide_' + index)[0]
				if ( item ) {
					var img = item.getElementsByTagName('img')[0]
					if ( !img ) {
						var slide = list[index]
						var containerEl = item.getElementsByClassName('swiper-zoom-container')[0]
						img = document.createElement('IMG')
						img.setAttribute('class', 'swiper-zoom-target')
						img.onload = function () {
							containerEl.innerHTML = ''
							containerEl.appendChild(img)
							loadedImgs.set(index, img)
						}
						img.onerror = function () {
							img = null
							uni.postMessage({data: {error: index}})
						}
						img.src = slide.url
					}
				}
			}
			
			//移除图片，回收内存
			function unloadImg (index) {
				if ( loadedImgs.has(index) ) {
					var img = loadedImgs.get(index);
					img.removeAttribute('src')
					var item = document.getElementsByClassName('slide_' + index)[0]
					var containerEl = item.getElementsByClassName('swiper-zoom-container')[0]
					containerEl.removeChild(img)
					containerEl.innerHTML = '正在加载中'
					img = null
					loadedImgs.delete(index)
				}
			}
			
			//记录列表
			function setTimeList (arg) {
				var list = JSON.parse(decodeURIComponent(decodeURIComponent(arg)))
				timeList = timeList.concat(list)
				uni.postMessage({data: {timeListEnd: timeList.length } })
			}
			
			function destory () {
				loadedImgs.forEach((value, key) => {//刷新数据前，先卸载所有视频，避免内存泄露
					unloadImg(key)
				})
				loadedImgs = new Map()
				mySwiper?.virtual?.removeAllSlides()
				mySwiper?.destroy(true, true)//销毁swiper
				mySwiper = null
			}
			
			//滑动到指定位置
			function slideTo (current) {
				if ( mySwiper ) {
					mySwiper.slideTo(current, 0, false)
					setTimeout(() => {
						//slideTo不会触发slideChangeTransitionEnd，需要手动触发
						mySwiper.emit('slideChangeTransitionEnd')
					}, 100)
				}
			}
			//开启自动播放
			function play () {
				if ( mySwiper ) mySwiper.autoplay.start();
			}
			//关闭自动播放
			function pause () {
				if ( mySwiper ) mySwiper.autoplay.stop();
			}
			//更新slide
			function update (i, arg) {
				var slide = JSON.parse(encodeURIComponent(arg))
				slides[i] = slide
				// if ( mySwiper ) mySwiper.virtual.update()
				if ( mySwiper ) mySwiper.emit('slideChangeTransitionEnd')
			}
			
			window.onload = function () {
				uni.postMessage({ data: { ready: 1 } });
			}
		</script>
	</body>
</html>